<script setup>
import {ref} from "vue";
import {showToast} from "vant";
import Refresh from "@/components/refresh.vue";

const activeIndex = ref(0)
const items = ref([{text: '休闲鞋'}, {text: '运动鞋'}])
const type1 = ref([['板鞋', 'hot-o'], ['复古篮球鞋', 'hot-o'], ['运动休闲鞋', 'hot-o'], ['老爹鞋', 'hot-o'], ['帆布鞋', 'hot-o'], ['足球鞋', 'hot-o']]);
const type2 = ref([['跑步鞋', 'hot-o'], ['实战篮球鞋', 'hot-o'], ['足球鞋', 'hot-o'], ['综合训练鞋', 'hot-o'], ['羽毛球鞋', 'hot-o'], ['网球鞋', 'hot-o'], ['高尔夫球鞋', 'hot-o'], ['骑行鞋', 'hot-o']]);
function onRefresh() {
  console.log("classify")
}
</script>

<template>
  <div>
    <van-nav-bar
        title="分类"
        left-text="返回"
        left-arrow
        @click-left="$router.push('/')">
    </van-nav-bar>
    <van-tree-select
        v-model:main-active-index="activeIndex"
        height="89vh"
        :items="items"
    >
      <template #content>
        <refresh @onRefreshItem="onRefresh">
          <div v-if="activeIndex === 0">
            <van-grid :gutter="10" :border="false" :column-num="2">
              <van-grid-item v-for="value in type1" :key="value" icon="/shoe.svg" :text="value[0]" :to="`/shoeList/`+value[0]"/>
            </van-grid>
          </div>
          <div v-if="activeIndex === 1">
            <van-grid :gutter="10" :border="false" :column-num="2">
              <van-grid-item v-for="value in type2" :key="value" :icon="value[1]" :text="value[0]" :to="`/shoeList/`+activeIndex"/>
            </van-grid>
          </div>
        </refresh>
      </template>
    </van-tree-select>
  </div>
</template>

<style scoped>
</style>